<template>
	<view class="content">
			<uv-tabs style="width: 700rpx;" :line-color="'#0368FF'" :activeStyle="{
			color: '#0368FF',
			fontWeight: 'bold',
			transform: 'scale(1.05)'
    	}"
		:inactiveStyle="{
			color: '#303133',
			transform: 'scale(1)'
		}"  :list="list" keyName="title" @change="click"></uv-tabs>
		<view class="justify-start align-center flex-wrap plr15 towclass">
			<view class="" @click="reset" :class="!curid?'on':''">
				全部
			</view>
			<view  v-for="(i,n) in cateList" :class="curid==i.id?'on':''"  @click="chosecate(i)">
						{{i.title}}
			</view>
		</view>
		<view class="plr15 pt15">
			<reportItem  :datas="datalist"></reportItem>
			
		</view>
			
			
	</view>
</template>

<script>
	import reportItem from '../../components/reportItem.vue'
	export default {
		components:{
			reportItem
		},
		data() {
			return {
					list:[],
					datalist:[],
					city:"",
					cateList:[],
					index:0,
					curid:""
			}
		},
		
		onReady() {
			// 模拟接口请求数据
			uni.showLoading({
				title: '加载中'
			})
			
		},
        onLoad(opt) {
			this.getArea()
			
        
        },
		methods: {
			reset(){
			this.curid=''	
			this.getList()
			},
			chosecate(i){
					this.curid=i.id
					this.getList()
			},
			click(e){
					this.index=e.index
					this.cateList=this.list[e.index].children
					this.curid=''
					this.getList()
			},
			getArea(){
				this.$api.getCategory().then(res=>{
					console.log(res)
					this.list=res.data
					
					this.cateList=res.data[0].children
					this.getList()
				})
			},
            async getList(){
              const {data,code}  =     await this.$api.getReportList({cat_id:'',classid:this.list[this.index].id,
				smallclassid:this.curid
			   })
              console.log(data)
              this.datalist = data
			  
            },
			change(index) {
               this.value = index;
               this.categoryId =this.list[index].id
               this.getList()
			},
            toactMain(item){
                uni.navigateTo({
                    url:'/pages/actMain/index?id='+item.id
                })
            }
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	.item {
		padding: 22rpx 20rpx 22rpx 32rpx;
        image{
            width: 124rpx;
            height: 164rpx;
            border-radius: 12rpx ;
            margin-right: 20rpx;
        }
		&-title {
			.text {
			font-size: 28rpx;
			color: #3D3D3D;
			line-height: 48rpx;
				
			}
		}
		&-content {
			
			.text {
				line-height: 36rpx;
				font-size: 24rpx;
				color: #9F9F9F;
				/* #ifndef APP-NVUE */
				word-break: break-all;
				/* #endif */
			}
		}
        &-price {
        	font-size: 24rpx;
        	color: #FF9012;
        	text {
        		font-size: 36rpx;
                line-height: 36rpx;
        	}
        }
	}
	.gap {
		padding: 0 30rpx;
	}
    .swiper{
        image{
            width:100%;
            height:300rpx;
        }
       
        
    }
	.towclass{
		view{
			border: 1rpx solid #0368ff;
				font-size: 22rpx;
			    color: #0368ff;
			    padding: 4rpx 16rpx;
			    border-radius: 30rpx;
			    margin-right: 20rpx;
			    margin-top: 20rpx;
		}
		.on{
			background-color: #0368ff;
			color: #fff;
		}
	}
</style>